<template>
  <div>
    <div style="border:1px solid #f1f1f1">
      <div id="myChart" class="echarts"></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    namedata: {
      type: Array,
      required: true
    },
    zhibiaodata: {
      type: Array,
      required: true
    }
  },
  data() {
    return {}
  },
  created() {
    // console.log('namedata', this.namedata)
    // console.log('zhibiaodata', this.zhibiaodata)
  },
  mounted() {
    this.drawLine()
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById('myChart'))
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: this.namedata,
          textStyle:{//图例文字的样式
                color:'#22ffff',
            }

        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            magicType: {
              show: true,
              type: ['line', 'bar', 'stack', 'tiled']
            },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        calculable: true,
        xAxis: [
          {
            name: '时间（24h）',
            type: 'category',

            boundaryGap: false,
            nameTextStyle:{
              color:'#36e5ff'
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#36e5ff'
              }
            },
            data: [
              '00',
              '01',
              '02',
              '03',
              '04',
              '05',
              '06',
              '07',
              '08',
              '09',
              '10',
              '11',
              '12',
              '13',
              '14',
              '15',
              '16',
              '17',
              '18',
              '19',
              '20',
              '21',
              '22',
              '23'
            ]
          }
        ],
        yAxis: [
          {
            type: 'value',
            name:'数值',
            nameTextStyle:{
              color:'#36e5ff'
            },
            axisLabel: {
              formatter: '{value}',
              textStyle: {
                color: '#36e5ff'
              }
            }
          }
        ],
        series: this.zhibiaodata
      })

      window.onresize = myChart.resize
    }
  }
}
</script>

<style>
.echarts {
  width: 100%;
  height: 500px;
  padding: 30px;
}
.search {
  display: inline-block;
}
</style>
